<template>
  <div>
    <div class="input-container">
      <input
        type="number"
        v-model="inches"
        @input="scanInput"
      />
      <span class="unit">inches</span>
    </div>

    <button v-if="btnVisible" type="button" @click="submitInches">continue</button>

  </div>
</template>

<script setup>

import {defineEmits, ref} from 'vue'

const inches = ref('')

const btnVisible = ref(false)

const props = defineProps({
  minValue: {
    type: Number,
    default: 0 // Provide a default value in case minValue is not passed
  }
})

const emit = defineEmits(['submit'])

const submitInches = () => {
  emit('submit', inches.value)
}

const scanInput = () => {
  console.log(props.minValue)
  if(Number(inches.value) > props.minValue) {
      btnVisible.value = true
  }

  if(Number(inches.value) < props.minValue) {
    btnVisible.value = false
  }
}


</script>

<style scoped>

input {
  border:none;
  outline:none;
  padding:10px;
  border-right: 1px solid #ccc;
}

.input-container {
  display: flex;
  border:1px solid #ccc;
  align-items: center;
  width:250px;
  margin-bottom:10px;
}

.unit {
  display: flex;
  padding-left:10px;
  justify-content: center;
  font-weight: 700;
}

button {
  border:none;
  outline:none;
  padding:10px;
  background-color:black;
  color:white;
  display: flex;
  width:100%;
  justify-content: center;
  text-transform: uppercase;
  font-weight: bold;
}

</style>
